<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入 Bootstrap -->
<link href="/style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
<style>
    table{
        margin-left: 20px;
    }
    #checkAll,.check{
        width: 16px;
        height: 16px;
        margin-right: 13px;
    }
    /*  --- page分页样式 ----   */
    li {
        list-style: none;
        float: left;
        width: 40px;
        height: 40px;
        border: #d6d8db solid 1px;
        margin-left: 10px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }
    .selected-li{
        background-color: #3ee0e5;
    }
    .pagination-div{
        position: relative;
        left: 20px;
        top:-20px;
    }
    #page_pageNow{
        display: inline-block;
        position: absolute;
        left:4px;
        top: 40px;
    }
    #page_Count{
        margin-left: 20px;
        display: inline-block;
    }
    #page_ul{
        margin-top: 30px;
        display: inline-block;
        margin-left: 53px;
    }
    #display_sel{
        margin-left: 20px;
        width: 40px;
        height: 40px;
    }
/*  -----------------------  */
    .table{
        width: 1000px;
        height: 100%;
    }
    .button_div{
        margin: 10px 0px 20px 20px;
    }
    #search_form{
        display: inline-block;
    }
    .search_btn{
        margin-right: 28px;
    }
    .data_label{
        margin-left: 15px;
    }
    #reset_Btn{
        margin-right: 10px;
    }
    .search_btn{
        background: #86cfda;
    }
</style>
<body>
    <div id="fruitContent">
        <div class="button_div">
            <form id="search_form">
                <label>水果名称：</label>
                <input id="fruitName" v-model="f.fruitName" type="text" placeholder="按水果名称搜索...">
                <label class="data_label">按日期搜索：</label>
                <input id="startTime" type="date" v-model="f.startTime">~
                <input id="endTime" type="date" v-model="f.endTime">
                水果产地：<input id="fruitArea" type="text" v-model="f.fruitArea" placeholder="按水果产地搜索...">
                <button class="search_btn" type="button" @click="search">点击搜索</button>
            </form>
            <button type="button" @click="allDel">批量删除</button>
            <button type="button" @click="addJump">添加</button>
        </div>

        <table class="table">
            <tr class="table-success">
                <td><input type="checkbox" @click="allCheck" id="checkAll"></td>
                <th>水果ID</th>
                <th>水果名字</th>
                <th>水果价格</th>
                <th>水果产地</th>
                <th>水果颜色</th>
                <th>水果时间</th>
                <th>操作</th>
            </tr>

<!--  page.resultList: Controller方法返回值是什么就写什么，返回值page赋值给了页面的page
而查询的数据被存在了ResultList里边，所以要page.resultList          -->
            <tr v-for="f in page.list" class="table-info">
                <td><input type="checkbox" @click="isCheckAll" :value="f.fruitId" class="check"></td>
                <td>{{f.fruitId}}</td>
                <td>{{f.fruitName}}</td>
                <td>{{f.fruitPrice}}</td>
                <td>{{f.fruitArea}}</td>
                <td>{{f.fruitColor}}</td>
                <td>{{f.fruitDate}}</td>
                <td>
                    <button type="button" @click="del(f)">删除</button>
                    <!-- 按钮：用于打开模态框-->
                    <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-danger modify" @click="openUpdBtn(f)">修改</button>
                    <!-- 跳转页面进行回显  -->
                    <button type="button" @click="echo_btn(f)">跳转页面回显</button>
                </td>
            </tr>
        </table>

        <!--分页-->
        <div class="pagination-div">
            <p id="page_pageNow">当前页：{{page.pageNow}}</p>
            <ul id="page_ul">
                <li @click="toPage(1)">首页</li>
                <li @click="toPage(page.pageNow - 1)" v-if="page.pageNow>1">{{page.pageNow - 1}}</li>
                <li class="selected-li">{{page.pageNow}}</li>
                <li @click="toPage(page.pageNow + 1)" v-if="page.pageNow<page.totalPage">{{page.pageNow + 1}}</li>
                <li @click="toPage(page.totalPage)">尾页</li>
                <!--    设置每页显示多少条数据    -->
                <select id="display_sel" @change="selPageCount" v-model="pageCount">
                    <option>5</option>
                    <option>10</option>
                    <option>15</option>
                    <option>20</option>
                </select>
            </ul>
            <p id="page_Count">共查询出{{page.totalCount}}条数据，共{{page.totalPage}}页。</p>


        </div>


        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">请修改水果信息</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <form id="fruit_form">
                            <input type="hidden" :value="f.fruitId" name="fruitId">
                            水果名称：<input type="text" name="fruitName" v-model="f.fruitName"><br>
                            水果价格：<input type="text" name="fruitPrice" v-model="f.fruitPrice"><br>
                            水果产地：<input type="text" name="fruitArea" v-model="f.fruitArea"><br>
                            水果颜色：<input type="text" name="fruitColor" v-model="f.fruitColor"><br>
                            水果时间：<input type="date" name="fruitDate" v-model="f.fruitDate">
                        </form>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button @click="updFruit(f)">保存修改</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="style/jquery-3.3.1.js"></script>
    <script src="style/vue.js"></script>
    <script src="style/my1.1.js"></script>
    <script src="style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
    <script>
        $(function (){
            let page = selFruit(1,5,null);//在这调用刚才返回的，设置当前页的参数
            let app= new Vue({
                el:"#fruitContent",
                data:{
                    page,
                    f:{},
                    pageCount: 5, //每页显示的条数
                },
                methods:{
                    del:function (f){
                        $.ajax({
                            type: "post",
                            url:"Fruit/delFruit",
                            data:{ids:f.fruitId},
                            dataType:"json",
                            success:function (data){
                                if(data==1){
                                    alert("删除成功");
                                }
                                location.href="fruit_list.html";
                            }
                        })
                    },
                    openUpdBtn:function (f){
                        $('#myModal').modal('show');
                        this.f = f;
                    },
                    updFruit:function (f){
                        $.ajax({
                            type:"post",
                            url:"Fruit/updFruit",
                            data:f,
                            dataType:"json",
                            success:function (data){
                                if(data==1){
                                    alert("修改成功");
                                }
                                location.href="fruit_list.html";
                            }
                        })
                    },
                    //.$emit() //触发父组件的自定义事件
                    allCheck: function () {
                        eventHub.$emit('allCheck', null);
                    },
                    isCheckAll: function () {
                        eventHub.$emit('isCheckAll', null);
                    },
                    allDel:function (){
                        eventHub.$emit('delAll',"Fruit/allDelFruit");
                    },
                    //只需要携带当前页就够了
                    toPage:function (pageNow){
                        this.page = selFruit(pageNow,this.pageCount,this.f);
                    },
                    search:function (){
                        this.page = selFruit(1,this.pageCount,this.f);
                    },
                    addJump:function (){
                        location.href="fruit_add.html";
                    },
                    selPageCount: function () { // 跳转每页显示的条数
                        this.page = selFruit(1,this.pageCount,this.f);
                    },
                    echo_btn:function (f){
                        location.href="fruit_echo.html";
                        let fruit = JSON.stringify(f);//将对象的值转换为 JSON 字符串
                        localStorage.setItem("fruit",fruit);//本地存储，将value存储到key字段
                    },


                }
            })
        })
        function selFruit(pageNow,pageCount,f){
            // 如果没有查询条件 创建一个携带当前页的json对象
            if(f==null){
                f = {pageNow:pageNow};
                f.pageCount = pageCount;
            }else {
                // 如果携带了查询条件则将当前页赋值就可以
                f.pageNow = pageNow;
                f.pageCount = pageCount;
            }

            let page;
            $.ajax({
                type:"post",
                data:f,
                url:"Fruit/selFruit",
                dataType:"json",
                async: false,
                success:function (data){
                    page=data;//把controller返回的信息赋值给page
                }
            })
            return page;//返回到上边进行调用。。
        }
    </script>
</body>
</html>